<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, RouterView } from 'vue-router'

const router = useRouter()
interface Group {
  id: string
  name: string
  path: string,
  icon:string,
  order: number,          // 排序号
  hidden: false
}
//后台菜单
const groups = ref<Array<Group>>([
  {
    id: 'A',
    name: '分类管理',
    path: '/home/categories',
    icon: 'category',  // 菜单项图标
    order: 1,          // 排序号
    hidden: false      // 是否隐藏
  },
  {
    id: 'B',
    name: '文章管理',
    path: '/home/articles',
    icon: 'article',
    order: 2,
    hidden: false
  },
  {
    id: 'C',
    name: '资料管理',
    path: '/home/resources',
    icon: 'resource',
    order: 3,
    hidden: false
  },
  {
    id: 'D',
    name: '截图管理',
    path: '/home/screenshots',
    icon: 'image',
    order: 4,
    hidden: false
  },
  {
    id: 'E',
    name: '项目管理',
    path: '/home/projects',
    icon: 'project',
    order: 5,
    hidden: false
  },
  {
    id: 'F',
    name: '个人中心',
    path: '/home/profile',
    icon: 'user',
    order: 6,
    hidden: false
  }
])


const defaultGroup = ref('')

const doActive = (group: Group) => {
  defaultGroup.value = group.id
  router.replace({
    path: group.path
  })
}
</script>

<template>
  <div>
    <div>
      <ul class="sub-nav">
        <li
          :class="{ active: defaultGroup === group.id }"
          :key="group.id"
          v-for="group in groups"
          @click="doActive(group)"
        >
          {{ group.name }}
        </li>
      </ul>
    </div>
    <div>
      <RouterView />
    </div>
  </div>
</template>
<style scoped>
.sub-nav {
  display: flex;
  margin-left: 8rem;
  margin-top: 1rem;
}

.active {
  border-bottom: 1px solid #e0575b;
  font-size: 1.2rem;
}

.sub-nav li {
  height: 3rem;
  width: 6rem;
  line-height: 3rem;

  text-align: center;
  cursor: pointer;
}
.sub-nav li:hover {
  color: #e0575b;
}
</style>
